<script lang="ts">
import { ref, reactive, defineComponent, watch, onMounted } from "vue";
import { getArticleList, getArticleCate, getAdvImages } from "@/network/api";
import router from "@/router";
import pageTop from "@/components/pageTop.vue";
import turnPage from "@/components/turnPages.vue";
import topSwiper from "@/components/topswiper.vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";

export default defineComponent({
  components: { turnPage, topSwiper, pageTop },
  async setup() {
    let data = reactive({
      value: "",
      selectTabs: "",
      TabsList: [] as any[],
      NewEventsList: [] as any[],
      page: 1,
      pageSize: 9,
      count: 0,
    });

    const Route = useRoute();
    if (Route.query.alias) data.selectTabs = String(Route.query.alias);

    watch(
      () => Route.query,
      (newValue) => {
        data.selectTabs = newValue.alias ? String(newValue.alias) : "";
        getArticleListData();
      }
    );

    const LearnDatas = (id: number) => {
      router.push({
        path: `/NewsDetail`,
        query: {
          id: id,
        },
      });
    };

    const bannerList = ref() as any;

    const PageChange = (page: number) => {
      data.page = page;
      getArticleListData();
    };

    const selectChange = (value: any) => {
      data.value = value;
      getArticleListData();
    };

    const tabsType = (item: string) => {
      if (item != "全部") {
        data.selectTabs = item;
      } else {
        data.selectTabs = "";
      }
      data.page = 1;
      getArticleListData();
    };

    /* 获取Banner */
    const getArticleBanner = async () => {
      const { data: bannerData } = await getAdvImages({ type: "new" });
      bannerList.value = bannerData;
    };

    /* 获取菜单 */
    const getArticleCateList = async () => {
      const { data: cateData } = await getArticleCate();
      data.TabsList = cateData;
      data.TabsList.unshift({
        id: 0,
        name: "全部",
        alias: "",
      });
    };

    /* 获取动态数据 */
    const getArticleListData = async () => {
      const res = await getArticleList({
        page: data.page,
        pageSize: data.pageSize,
        article_category_alias: data.selectTabs ? data.selectTabs : "",
        sort_type: data.value,
      });
      res.data.list.forEach((item: any) => {
        const timeZone = ref(0); /* 用户当前时区 */
        timeZone.value = -new Date().getTimezoneOffset() / 60;
        item.publish_time = item.publish_time - (8 - timeZone.value) * 3600;
        item.newsDate = dayjs(item.publish_time * 1000).format("YYYY-MM-DD");
      });
      data.NewEventsList = res.data.list;
      data.count = res.data.count;
    };

    onMounted(() => {
      getArticleBanner();
      getArticleCateList();
      getArticleListData();
    });
    return {
      data,
      tabsType,
      PageChange,
      selectChange,
      LearnDatas,
      bannerList,
    };
  },
});
</script>

<template>
  <pageTop :name="'新闻资讯'" :text="'聚焦行业动态，掌握前沿资讯，分享活动现场，洞察市场趋势'"></pageTop>

  <div style="background-color: rgb(245, 245, 247)">
    <div class="content">
      <!-- <caseBanner :list="bannerList"></caseBanner> -->

      <!-- <div class="tabs">
        <el-row>
          <el-col :xs="0" :sm="0" :md="24" :lg="24" :xl="24">
            <el-row>
              <el-col :span="19">
                <span v-for="(item, index) in data.TabsList" class="tabs_item tabsText xl_spantabs"
                  :class="data.selectTabs == item.alias ? 'f_w_b' : ''" :key="index" @click="tabsType(item.alias)">{{
                    item.name }}</span>
              </el-col>
            </el-row>
          </el-col>

          <el-col :xs="24" :sm="24" :md="0" :lg="0" :xl="0" class="tabs_xs_item">
            <el-row justify="start">
              <span v-for="(item, index) in data.TabsList" class="tabs_item tabsText xl_spantabs"
                :class="data.selectTabs == item.alias ? 'f_w_b' : ''" :key="index" @click="tabsType(item.alias)">{{
                  item.name }}</span>
            </el-row>
          </el-col>
        </el-row>
      </div> -->

      <div class="eventsList">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="24"
            :md="8"
            :lg="8"
            :xl="8"
            v-for="(item, index) in data.NewEventsList"
            :key="index"
            style="margin: 0px 0 20px 0"
            @click="LearnDatas(item.id)"
          >
            <div class="eventsitem scaleImgCard">
              <div class="imgs_b">
                <img :src="item.cover_image" alt="" />
              </div>
              <div class="item_b">
                <div class="time auxiliaryText">{{ item.newsDate }}</div>
                <div class="text contentText">
                  {{ item.title }}
                </div>
                <el-button color="#064DD6" size="large" round @click="LearnDatas(item.id)"
                  >马上查看</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>

        <div>
          <turnPage
            :total="data.count"
            :size="data.pageSize"
            @handleChangePage="PageChange"
          ></turnPage>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.breadcrumb {
  border-bottom: 2px solid $auxiliaryColor3;
  padding-bottom: 20px;
}

.content {
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;

  .content-title {
    span {
      color: #666;
    }
  }

  .eventsitem {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 20px 22px 31px 24px;
    box-shadow: 0px 0px 14px 4px rgba(205, 213, 232, 0.31);
    border-radius: 10px;
    .imgs_b {
      height: 250px;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;

      img {
        border-radius: 20px;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .item_b {
    .time {
      margin: 10px 0;
    }

    .text {
      color: $auxiliaryColor;
      margin-bottom: 20px;
    }

    .el_bun {
      border: 0px;
    }
  }

  .events_text {
    padding: 119px 0px 161px 102px;

    .item_b {
      .el_bun {
        background-color: $mainColor;
        color: #fff;
      }
    }
  }

  :deep(.eventsitem:hover) {
    .item_b {
      .el_bun {
        color: #f5f5f7;
        background-color: $mainColor;
        transition: all 0.3s;

        span {
          text-decoration: initial;
        }
      }

      .el-button {
        span {
          text-decoration: initial;
        }
      }
    }
  }
}

.eventsList {
  margin-top: 43px;
}

.top_nei {
  border-radius: 15px;
  overflow: hidden;
  padding: 68px 77px 60px 77px;
  background-color: #fff;

  .box_img {
    border-radius: 15px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

:deep(.tabs) {
  margin: 20px 0;
  padding: 20px 12px;
  border-radius: 15px;
  background-color: #fff;

  .tabs_item {
    display: inline-block;
    color: #404040;
  }

  .xl_spantabs {
    padding: 0px 25px;
    cursor: pointer;
  }

  .Select {
    font-size: $tabs;
    position: absolute;
    right: 0;
    top: -12px;

    .el-input {
      width: 100%;
      font-size: $tabs;

      .el-input__wrapper {
        box-shadow: 0 0 0 0 !important;
        padding: 3px 15px !important;
      }

      .el-input__inner {
        font-size: 15px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .content {
    padding: 30px 16px !important;

    .top_nei {
      padding: 30px 25px;

      .box_img {
        height: initial;
      }
    }

    .events_text {
      padding: 20px 0 0 0;
    }
  }

  .tabs {
    background-color: initial;
    padding: 0;
    margin: 0;
  }

  .eventsList {
    margin-top: 20px;
  }

  .tabs_xs_item {
    border-radius: 10px;
    overflow: hidden;
    padding: 15px 10px;
    background-color: #fff;
  }

  #titlePart {
    padding: 0 30px !important;
  }

  .eventsitem {
    .imgs_b {
      height: 180px !important;
    }
  }
}
</style>
